<!-- HierarchicalAnalysis.vue -->
<template>
  <div class="hierarchical-analysis">
    <div class="panel-header">
      <h2><el-icon><Connection /></el-icon> 分层分析导航</h2>
      <div class="drilldown-info">
        <el-tag type="info">当前层级: {{ currentLevel }}</el-tag>
      </div>
    </div>

    <div class="drilldown-controls">
      <el-steps :active="activeStep" align-center>
        <el-step title="信号级" description="原始信号分析" />
        <el-step title="特征级" description="信号特征提取" />
        <el-step title="功能级" description="目标功能识别" />
      </el-steps>
      <div class="step-buttons">
        <el-button :disabled="activeStep === 0" @click="prevStep">
          <el-icon><ArrowLeft /></el-icon>
          上一步
        </el-button>
        <el-button :disabled="activeStep === 2" type="primary" @click="nextStep">
          下一步
          <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
    </div>

    <div class="analysis-visualization">
      <div class="visualization-container">
        <div ref="analysisChart" class="chart-container"></div>
      </div>
      <div class="analysis-results">
        <h3>分析结果</h3>
        <div class="result-grid">
          <div class="result-card" v-for="(result, index) in currentResults" :key="index">
            <div class="result-icon">
              <el-icon :size="24">
                <component :is="result.icon" />
              </el-icon>
            </div>
            <div class="result-value">{{ result.value }}</div>
            <div class="result-label">{{ result.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="feature-list">
      <h3>提取特征</h3>
      <el-table :data="features" height="15vh" style="width: 100%">
        <el-table-column prop="name" label="特征名称" width="180" />
        <el-table-column prop="value" label="特征值" width="120" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === '正常' ? 'success' : 'warning'" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import * as echarts from 'echarts'
import { Connection, ArrowLeft, ArrowRight, DataLine, Histogram, TrendCharts } from '@element-plus/icons-vue'
import {ElButton, ElIcon, ElStep, ElSteps, ElTable, ElTableColumn, ElTag} from "element-plus";

const activeStep = ref(0)
const currentLevel = computed(() => {
  return ['信号级', '特征级', '功能级'][activeStep.value]
})

const signalResults = ref([
  { icon: 'DataLine', value: '1.24GHz', label: '中心频率' },
  { icon: 'Histogram', value: '12.5MHz', label: '带宽' },
  { icon: 'TrendCharts', value: '-65dBm', label: '信号强度' }
])

const featureResults = ref([
  { icon: 'DataLine', value: 'LFM', label: '调制类型' },
  { icon: 'Histogram', value: '1.2μs', label: '脉冲宽度' },
  { icon: 'TrendCharts', value: '250Hz', label: '重复频率' }
])

const functionResults = ref([
  { icon: 'DataLine', value: '搜索雷达', label: '设备类型' },
  { icon: 'Histogram', value: '对空监视', label: '主要功能' },
  { icon: 'TrendCharts', value: '军用', label: '用途分类' }
])

const currentResults = computed(() => {
  return [signalResults, featureResults, functionResults][activeStep.value].value
})

const signalFeatures = ref([
  { name: '频率', value: '1.24GHz', description: '信号中心频率', status: '正常' },
  { name: '带宽', value: '12.5MHz', description: '信号占用带宽', status: '正常' },
  { name: '强度', value: '-65dBm', description: '信号接收强度', status: '正常' }
])

const featureFeatures = ref([
  { name: '调制类型', value: 'LFM', description: '线性调频', status: '正常' },
  { name: '脉冲宽度', value: '1.2μs', description: '脉冲持续时间', status: '正常' },
  { name: '重复频率', value: '250Hz', description: '脉冲重复频率', status: '正常' }
])

const functionFeatures = ref([
  { name: '设备类型', value: '搜索雷达', description: '雷达设备类型', status: '正常' },
  { name: '扫描方式', value: '圆周扫描', description: '天线扫描方式', status: '正常' },
  { name: '覆盖范围', value: '360°', description: '方位覆盖范围', status: '正常' }
])

const features = computed(() => {
  return [signalFeatures, featureFeatures, functionFeatures][activeStep.value].value
})

const analysisChart = ref(null)
let chartInstance = null

const prevStep = () => {
  if (activeStep.value > 0) activeStep.value--
}

const nextStep = () => {
  if (activeStep.value < 2) activeStep.value++
}

onMounted(() => {
  initAnalysisChart()

  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
  })
})

const initAnalysisChart = () => {
  if (analysisChart.value) {
    chartInstance = echarts.init(analysisChart.value, 'dark')

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['信号强度', '频率变化', '特征值'],
        textStyle: { color: '#a0bff0' }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: Array.from({length: 100}, (_, i) => i),
        axisLine: { lineStyle: { color: '#5a7cc9' } },
        splitLine: { show: false },
        axisLabel: { show: false }
      },
      yAxis: [
        {
          type: 'value',
          name: '信号强度(dBm)',
          position: 'left',
          axisLine: { show: true, lineStyle: { color: '#5a7cc9' } },
          splitLine: { lineStyle: { color: 'rgba(93, 102, 224, 0.1)' } },
          axisLabel: { color: '#a0bff0' }
        },
        {
          type: 'value',
          name: '频率(GHz)',
          position: 'right',
          offset: 40,
          axisLine: { show: true, lineStyle: { color: '#9c42ff' } },
          splitLine: { show: false },
          axisLabel: { color: '#9c42ff' }
        },
        {
          type: 'value',
          name: '特征值',
          position: 'right',
          axisLine: { show: true, lineStyle: { color: '#2ecc71' } },
          splitLine: { show: false },
          axisLabel: { color: '#2ecc71' }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 20
        }
      ],
      series: [
        {
          name: '信号强度',
          type: 'line',
          data: Array.from({length: 100}, () => Math.random() * 40 - 70),
          smooth: true,
          symbol: 'none',
          lineStyle: {
            width: 2,
            color: '#4db8ff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(77, 184, 255, 0.4)' },
              { offset: 1, color: 'rgba(77, 184, 255, 0.1)' }
            ])
          }
        },
        {
          name: '频率变化',
          type: 'line',
          data: Array.from({length: 100}, () => Math.random() * 0.5 + 1.2),
          yAxisIndex: 1,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            width: 2,
            color: '#9c42ff'
          }
        },
        {
          name: '特征值',
          type: 'line',
          data: Array.from({length: 100}, () => Math.random() * 100),
          yAxisIndex: 2,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            width: 2,
            color: '#2ecc71'
          }
        }
      ]
    }

    chartInstance.setOption(option)

    // 窗口大小变化时重新调整图表
    window.addEventListener('resize', () => {
      if (chartInstance) chartInstance.resize()
    })
  }
}
</script>

<style scoped>
.hierarchical-analysis {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5vh 1.5vw;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
}

.panel-header h2 {
  font-size: 1.3rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #4db8ff;
}

.drilldown-controls {
  margin-bottom: 2vh;
}

:deep(.el-steps) {
  background: rgba(20, 30, 60, 0.6);
  border-radius: 8px;
  padding: 1.5vh 1.5vw;
  margin-bottom: 1.5vh;
}

:deep(.el-step__title) {
  color: #c0d1ff;
  font-size: 1rem;
}

:deep(.el-step__description) {
  color: #a0bff0;
  font-size: 0.85rem;
}

.step-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5vw;
}

.analysis-visualization {
  display: flex;
  height: 30vh;
  gap: 1.5vw;
  margin-bottom: 2vh;
}

.visualization-container {
  flex: 2;
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.analysis-results {
  flex: 1;
  background: rgba(12, 20, 40, 0.5);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.analysis-results h3 {
  font-size: 1.05rem;
  margin: 0 0 1vh;
  color: #c0d1ff;
  font-weight: 500;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5vh;
}

.result-card {
  background: rgba(20, 30, 60, 0.6);
  border-radius: 6px;
  padding: 1.5vh 1vw;
  text-align: center;
  border: 1px solid rgba(93, 102, 224, 0.2);
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(93, 102, 224, 0.2);
  border-color: rgba(93, 102, 224, 0.5);
}

.result-icon {
  color: #4db8ff;
  margin-bottom: 0.5vh;
}

.result-value {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, #4db8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5vh;
}

.result-label {
  font-size: 0.9rem;
  color: #a0bff0;
}

.feature-list {
  flex: 1;
}

.feature-list h3 {
  font-size: 1.05rem;
  margin: 0 0 1vh;
  color: #c0d1ff;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 100%;
}

:deep(.el-table) {
  background-color: transparent;
  color: #e4f0ff;
}

:deep(.el-table th) {
  background-color: rgba(20, 30, 60, 0.6);
  color: #4db8ff;
}

:deep(.el-table tr) {
  background-color: rgba(16, 22, 46, 0.4);
}

:deep(.el-table__row:hover) {
  background-color: rgba(93, 102, 224, 0.2);
}

:deep(.el-table--border) {
  border: 1px solid rgba(93, 102, 224, 0.3);
}

:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table::before) {
  background-color: rgba(93, 102, 224, 0.3);
}
</style>